<template>
	<div class="chart-container">
		<div ref="chartCpu" class="chart"></div>
    	<div ref="chartMemory" class="chart"></div>
	</div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
	data(){
			return{
				jsonData: {},
				jsonDataArray: [],
				NoArray: [],
				cpuArray: [],
				memoryArray: [],
			}
		},
	methods: {
		getData() {
			let that=this
			that.$axios.get("http://10.112.38.20:39898/data_link/1").then(function(res) {
				// that.times = res.data.times;
				that.jsonDataArray = Object.values(res.data);
				that.extractData();
				that.drawChart();
			})
		},
		extractData() {
			this.NoArray = []
			this.cpuArray = []
			this.memoryArray = []
			// // 使用 Object.values 转换 jsonData 为数组
			// const dataArray = Object.values(this.jsonData);
			// 遍历转换后的数组，提取 No、cpu 和 memory 并分别推入到对应的数组中
			this.jsonDataArray.forEach(item => {
				this.NoArray.push(item.name);
				this.cpuArray.push(item.cpu);
				this.memoryArray.push(item.memory);
			});
		},
		drawChart() {
			// 绘制 CPU 图表
			this.drawCpuChart();
			// 绘制内存图表
			this.drawMemoryChart();
		},
		drawCpuChart() {
			const cpuChartDom = this.$refs.chartCpu;
			if (!echarts.getInstanceByDom(cpuChartDom)) {
				var cpuChart = echarts.init(cpuChartDom);
			} else {
				var cpuChart = echarts.getInstanceByDom(cpuChartDom);
			}
			const cpuOption = {
				grid: {
					left: '20%',
					right: '10%',
					top: '10%',
					bottom: '20%',
				},
				// 添加图例配置
				legend: {
					bottom: 0, // 图例显示在底部，可以设置一个合适的外边距
					data: ['cpu'], // 图例项的数据，与 series 中的名称对应
					textStyle: {
						color: '#fff', // 图例文字颜色
						fontSize: 16, // 图例文字大小
						fontWeight: 'bold',
					},
					// 其他图例配置...
				},
				xAxis: {
					type: 'category',
					data: this.NoArray,
					axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 12,
						fontWeight: 'bold',
						fontStyle: 'italic',
					},
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 12,
						fontWeight: 'bold',
						fontStyle: 'italic',
					},
					},
				},
				series: [{
				name: 'cpu',
				data: this.cpuArray,
				type: 'bar',
				barWidth: '20%', // 可以根据需要调整宽度
				itemStyle: {
					color: '#18FFFF',
				},
				}],
			};
			cpuChart.setOption(cpuOption);
			},
			drawMemoryChart() {
			const memoryChartDom = this.$refs.chartMemory;
			if (!echarts.getInstanceByDom(memoryChartDom)) {
				var memoryChart = echarts.init(memoryChartDom);
			} else {
				var memoryChart = echarts.getInstanceByDom(memoryChartDom);
			}
			const memoryOption = {
				grid: {
					left: '10%',
					right: '10%',
					top: '10%',
					bottom: '20%',
				},
				// 添加图例配置 
				legend: {
					bottom: 0, // 图例显示在底部，可以设置一个合适的外边距
					data: ['内存'], // 图例项的数据，与 series 中的名称对应
					textStyle: {
						color: '#fff', // 图例文字颜色
						fontSize: 16, // 图例文字大小
						fontWeight: 'bold',
					},
					// 其他图例配置...
				},
				xAxis: {
					type: 'category',
					data: this.NoArray,
					axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 12,
						fontWeight: 'bold',
						fontStyle: 'italic',
					},
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 12,
						fontWeight: 'bold',
						fontStyle: 'italic',
					},
					},
				},
				series: [{
				name: '内存',
				data: this.memoryArray,
				type: 'bar',
				barWidth: '20%', // 可以根据需要调整宽度
				itemStyle: {
					color: 'red',
				},
				}],
			};
			memoryChart.setOption(memoryOption);
		},
		switper(){
			let that=this
			that.getData()
			var timerID=setInterval(()=>that.getData(), 2000)
		},
	},
	mounted() {
		this.switper();
	},
  };
  </script>
  
  <style lang="scss" scoped>
  .chart-container {
	width: 100%;
	height: 100%;
	display: flex; /* 使用 flexbox 布局 */
	justify-content: space-between; /* 使两个图表容器并排显示 */
  }
  
  .chart {
	width: 49%; /* 设置图表容器宽度，总和接近100% */
	height: 100%;
  }
  </style>
  